<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet"  th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet"  th:href="@{/css/carousel.css}">

    <style>
        h3 {
            font-weight: bold;
        }

        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #666;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        /* 侧栏导航 */
        .sideBox {
            padding: 10px;
            height: 220px;
            background: #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .sideBox .hd {
            height: 30px;
            line-height: 30px;
            background: #f60;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
        }

        .sideBox .hd .more {
            color: #fff;
        }

        .sideBox .hd h3 span {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
        }

        .sideBox .bd {
            padding: 5px 0 0;
        }

        #sideMenu .bd li {
            margin-bottom: 2px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
        }

        #sideMenu .bd li a {
            display: block;
            background: #EAE6DD;
        }

        #sideMenu .bd li a:hover {
            background: #D5CFBF;
        }

        /* 列表页 */
        #mainBox {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox .mHd {
            border-bottom: 2px solid #00AA88;
            height: 30px;
            line-height: 30px;
        }

        #mainBox .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #00AA88;
            color: #fff;
        }

        #mainBox .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox .path {
            float: right;
        }

        /* 位置导航 */
        .path {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .path a, .path span {
            margin: 0 5px;
        }

        /* 文章列表 */
        .newsList {
            padding: 10px;
            text-align: left;
        }

        .newsList li {
            background: url("../images/share/point.png") no-repeat 2px 14px;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
        }

        .newsList li a {
            display: inline-block;
            *display: inline;
            zoom: 1;
            font-size: 14px;
        }

        .newsList li .date {
            float: right;
            color: #999;
        }

        .newsList li.split {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ddd;
            height: 0px;
            line-height: 0px;
            overflow: hidden;
        }

        /* 通用带图片的信息列表_普通式 */
        .picList {
            padding: 10px;
            text-align: left;
        }

        .picList li {
            margin: 0 5px;
            height: 190px;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="javascript:;" style="font-size:32px;">互联网医药平台</a>
                </div>
                <div th:if="${session.user == null}" id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a th:href="@{/default/log}">登录</a></li>
                        <li><a th:href="@{/default/reg}">注册</a></li>
                    </ul>
                </div>
                <div th:if="${session.user != null}" id="navbar1" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="glyphicon glyphicon-user"></i><span th:text="${session.user.getUserName()}"></span><span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#"><i class="glyphicon glyphicon-scale"></i> 我的信息</a></li>
                                <li class="divider"></li>
                                <li><a href="/user/outLogin"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">

        <div class="item active" >
            <img th:src="@{/img/carousel-1.jpg}" alt="First slide">
        </div>
        <div class="item"  style="cursor:pointer;">
            <img th:src="@{/img/carousel-2.jpg}" alt="Second slide">
        </div>
        <div class="item" style="cursor:pointer;">
            <img th:src="@{/img/carousel-3.jpg}" alt="Third slide">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="col-lg-4">
            <a class="type" role="button" name="1">
                <img class="" th:src="@{/img/p1.jpg}" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>中药</h2>
            </a>
            <p>
                以中国传统医药理论指导采集、炮制、制剂，说明作用机理，指导临床应用的药物，统称为中药。简而言之，中药就是指在中医理论指导下，用于预防、治疗、诊断疾病并具有康复与保健作用的物质。中药主要来源于天然药及其加工品，包括植物药、动物药、矿物药及部分化学、生物制品类药物。
                &raquo;
            </p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <a class="type" role="button" name="3">
                <img class="" th:src="@{/img/p2.jpg}" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>西药</h2>
            </a>
            <p>
                西药，相对于祖国传统中药而言，指现代医学用的药物，一般用化学合成方法制成或从天然产物提制而成；包括阿司匹林、青霉素、止痛片等。西药即为有机化学药品，无机化学药品和生物制品。看其说明书则有化学名、结构式，剂量上比中药精确，通常以毫克计。
                &raquo;
            </p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <a class="type" role="button" name="2">
                <img class="" th:src="@{/img/p3.jpg}" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>中成药</h2>
            </a>
            <p>
                中成药是以中药材为原料，在中医药理论指导下，为了预防及治疗疾病的需要，按规定的处方和制剂工艺将其加工制成一定剂型的中药制品，是经国家药品监督管理部门批准的商品化的一类中药制剂。
                &raquo;
            </p>
        </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box ui-draggable" id="mainBox">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="/projects">更多...</a>
                        </div>
                        <h3>
                            医药
                            <small style="color:#FFF;">热销药物</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <div id="div1" class="row">

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- FOOTER -->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="#">关于我们</a> | <a rel="nofollow"
                                                                                 href="#">服务条款</a> | <a
                        rel="nofollow" href="#">免责声明</a> |<a rel="nofollow" href="/adlogin" style="text-decoration:none;color: #13A8F8; ">管理员登陆</a>| <a rel="nofollow" href="#">网站地图</a>
                        | <a rel="nofollow" href="#">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ? 2019-2020qf.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div><!-- /.container -->


<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/script/back-to-top.js}"></script>
<script>
    $(".thumbnail img").css("cursor", "pointer");
    $(".thumbnail img").click(function () {
        window.location.href = "project.html";
    });
    $(function () {
        $.ajax({
            url: "/drug/show",
            data:{
                page:1,
                pageSize:4
            },
            type: "post",
            success: function (data, status) {
                console.log(typeof data.list);
                show(data);
            }
        });
        $(".type").click(function () {
            var value = $(this).attr("name");
            console.log(value);
            $.ajax({
                url: "/drug/show",
                data: {
                    drugTypeId: value,
                    pageSize:4
                },
                type: "post",
                success: function (data, status) {
                    console.log(typeof data.list);
                    show(data);
                }
            })
        });
        function show(data) {
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html +=
                    '<div class="col-md-3">'+
                    '<div class="thumbnail">' +
                    '<img alt="300x200" src="/img/p1.jpg"/>' +
                    '<div class="caption">' +
                    '<h3 class="break">' +
                    '<a class="drugshow" onsubmit="return false" href="javascript:;" role="button" name="'+data.list[i].drugId+'" >'+data.list[i].drugName+'</a>' +
                    '</h3>' +
                    '<p>' +
                    '<div style="float:left;">' +
                    '价格:'+data.list[i].drugPrice+
                    '</div>' +
                    '</p>' +
                    '<br>' +
                    '<div>' +
                    '<span style="float:right;">生产日期:'+data.list[i].drugCreateDate+'</span>' +
                    '<span>销量: '+data.list[i].drugSales+'</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'

            }

            $("#div1").html(html);
        }

        $("#div1").on('click','.drugshow',function () {
            var drugId = $(this).attr("name");
            window.location.href = "/drug/project?id="+$(this).attr("name");
        });
        function adlogin() {
            alert("111111111111111111111111111111111")
        }
    });
</script>
</body>
</html>